<script setup lang="ts">
import { ref } from 'vue'
import axios from 'axios'
import request from '@/utils/request.ts'

let a = '123'
let b = '134';
var c = 1
let obj = {
  a: 1,
  b: 2,
}
console.log(a, b,c, obj)
const myFn = () => {}

const value1 = ref('')

const currentPage4 = ref(4)
const pageSize4 = ref(100)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
myFn()

/**
 * 验证mock接口的使用：
 */
const handleLogin = ()=>{
  const params = {
    username:'admin',
    // username:'system', // 超管
    password:'111111', // 登录成功
    // password:'1111112', // 登录失败
  }
  const params2 = {
    username:'admin',
    // username:'system', // 超管
    // password:'111111', // 登录成功
    password:'1111112', // 登录失败
  }
  axios({
    method: 'POST',
    url:'/api/user/login',
    data:params,
  })
    .then(res => {
      console.log('mock登录res：',res.data)
    })


  request({
    method: 'POST',
    url:'/user/login',
    data:params2,
  })
    .then(res => {
      console.log('登录2res：',res)
    })
}

handleLogin()
</script>

<template>
  <div>home

    <div class="a">


      <div class="b">
        <div class="c"></div>
      </div>
      <br />
    </div>
    <div>
      <el-row class="mb-4">
        <el-button>Default</el-button>
        <el-button type="primary">Primary</el-button>
        <el-button type="success">Success</el-button>
        <el-button type="info">Info</el-button>
        <el-button type="warning">Warning</el-button>
        <el-button type="danger">Danger</el-button>
      </el-row>
      <div>
        <el-date-picker
          v-model="value1"
          type="date"
          placeholder="Pick a day"
        />
      </div>
    </div>
    <el-pagination
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[100, 200, 300, 400]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <div>
      <el-icon>
        <CirclePlus />
      </el-icon>
      <el-row>
        <el-icon size="24px">
          <component is="Search" size="24px"></component>
        </el-icon>
        <el-icon size="24px">
          <component is="Message" size="24px"></component>
        </el-icon>
      </el-row>
      <el-row>
        <!--<el-button :icon="Search" circle />-->
        <!--<el-button type="primary" :icon="Edit" circle />-->
        <!--<el-button type="success" :icon="Check" circle />-->
        <!--<el-button type="info" :icon="Message" circle />-->
        <!--<el-button type="warning" :icon="Star" circle />-->
        <!--<el-button type="danger" :icon="Delete" circle />-->
      </el-row>
    </div>

    <div>
      <svg style="width: 36px;height: 36px;">
        <use xlink:href="#icon-link" fill="#f40"></use>
      </svg>
      <svg>
        <use xlink:href="#icon-moq"></use>
      </svg>
      <svg>
        <use xlink:href="#icon-png"></use>
      </svg>
    </div>

    <div>
      <div>SvgIcon组件</div>
      <div>
        <SvgIcon name="png" color="#f40" width="30px" height="30px"></SvgIcon>
        <SvgIcon name="png"></SvgIcon>
      </div>
    </div>
    <div>
      <div>全局组件</div>
      <div>
        <BasicTable></BasicTable>

        <div></div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.a {
  width: 100px;
  height: 100px;
  background: #000;

  .b {
    width: 50px;
    height: 50px;
    background: #7e3535;
    .c {
      width: 20px;
      height: 20px;
      background: #63bd65;
      background: $primary-color;
    }
  }
}
</style>
